<template>
    <div>
        <!-- <h1>轮播图组件</h1> -->
        <swiper  :options="options" class="ratabox">
            <!-- img:数组里的每一个对象  img.encodeId 对象里的encodeId属性
                img.pic 对象里的pic(图片地址)属性
            -->
            <swiper-slide class="rotation"
                v-for="(img,index) in imgs"
                :key="index"
            ><img :src="img.pic" ></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
    
</template>
<script>
// 安装vue插件版vue-awesome-swiper
// npm i vue-awesome-swiper swiper@5.x -S
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
    data(){
        return {
            imgs:[], //存储图片
            options: {
                autoplay:true,
                pagination: {
                    el: '.swiper-pagination',
                    // delay: 500,//1秒切换一次
                },
            }
        }
    },
    created(){
        this.axios.get("/banner?type=1")
        .then(result=>{
            // console.log("banner==>",result.banners);
            this.imgs=result.banners;
        })
    },
    components: {
    Swiper,
    SwiperSlide
  },
}
</script>
<style lang="less" scoped>
.ratabox{
    .rotation{
        img{
            display: block;
            width: 100%;
        }
    }
}

</style>